<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="css/rcss.css"/>
</head>
<body class="text-center" onload="myFunction()">
<!--<h2>Simple Is Everything </h2>-->
<div id="bigBox">
    <h1>注册</h1>
    <div class="form-control">
        <form  action="/end" method="get" onsubmit="return subForm()" id="xc">
            <div class="inputText">
                <input type="text" name="username" id="uname" placeholder="请输入用户名/昵称" />
            </div>
            <div class="inputText">
                <input type="password" name="password" id="pwd1" placeholder="请输入密码" />
            </div>
            <div class="inputText">
                <input type="password" name="password2" id="pwd2" placeholder="请确认密码" />
            </div>

            <div>
                <button type="submit" id="btnvrf" class="inputSubmit" onclick="f()" >点击注册</button>
            </div>
            <div class="right">
                <a  href="http://localhost:8086/" class="right">退出注册</a>
            </div>

            <p style="color: #ff0000" id="msg" th:text="${{msg}}" ></p>
        </form>

    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script type="text/javascript">

    var myInput = document.getElementById("msg");
    var msgContent = myInput.innerHTML;
    function f() {
        $("#msg").val("");
    }
    function myFunction() {
        if(msgContent == "注册成功") {
            alert("注册成功,将跳转到登录页面");
            setTimeout(function () {window.location.href = "http://localhost:8086/"}, 1000);
        }


    }

    //鼠标变红事件，鼠标放到注册按钮上会变红(主要想看看事件绑定)
    $(".inputSubmit").mouseover(function(){
        $(".inputSubmit").css({
            "color":"red"
        })
    }).mouseout(function(){
        $(".inputSubmit").css({
            "color":"white"
        })
    });


</script>
</body>
<style type="text/css">
    body{
        margin:0;
        padding: 0;
        background-image: url(/image/pictures/6.jpg);
        background-repeat: no-repeat;
        background-size:cover ;
    }
    #bigBox{
        margin:0 auto;
        margin-top:150px;
        padding:20px 50px;

        background-color:#000000;
        opacity:0.7;
        width:400px;
        height:300px;
        border-radius: 10px;
        text-align: center;
    }
    #bigBox h1
    {
        color:white;
    }
    #bigBox.form-control
    {
        margin-top:50px;
    }
    #bigBox .form-control .inputText
    {
        margin-top:20px;
    }
    #bigBox .form-control .inputSubmit
    {
        border:0;
        margin-top:15px;
        align:center;
        color:#ffffff;
        width:160px;
        height:30px;
        border-radius: 20px;
        background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
        background-blend-mode: multiply,multiply;
    }
    #sp
    {
        color:red;
        font-size: 16px;
    }
    h2{
        color:gray;
        text-align:center;
    }

    a.right {
        font-size: 18px;
        right: 20px;
    }


</style>
</html>
